<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="联系飞易腾科技 - 开启您的数字化之旅">
    <title>联系我们 - 飞易腾科技</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="style/fyt.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="fas fa-rocket"></i> 飞易腾科技
            </a>

            <button class="navbar-toggler" type="button" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="services.html">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="cases.html">案例</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="contact.html">联系</a>
                    </li>
                    <li class="nav-item">
                        <span class="dark-mode-toggle" id="darkModeToggle">
                            <i class="fas fa-moon"></i>
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <a class="nav-link" href="index.html">首页</a>
                <a class="nav-link" href="services.html">服务</a>
                <a class="nav-link" href="cases.html">案例</a>
                <a class="nav-link" href="news.html">新闻</a>
                <a class="nav-link" href="about.html">关于</a>
                <a class="nav-link active" href="contact.html">联系</a>
            </div>
        </div>
    </nav>

    <!-- Page Header / Tech Banner -->
    <section class="page-header">
        <!-- 动态科技背景层 -->
        <div class="mesh-bg"></div>
        <div class="particles-bg" id="contactParticles"></div>
        <div class="tech-grid"></div>
        <div class="floating-elements" aria-hidden="true">
            <div class="float-circle float-1"></div>
            <div class="float-circle float-2"></div>
            <div class="float-circle float-3"></div>
            <div class="float-square float-4"></div>
            <div class="float-square float-5"></div>
        </div>

        <!-- 文案内容层（提权到前景，避免被遮挡） -->
        <div class="container text-center hero-content">
            <div class="hero-badge"><i class="fas fa-satellite-dish"></i> 即刻与我们联系</div>
            <h1 class="display-4 fw-bold mb-3">联系我们</h1>
            <p class="lead">让我们一起开启您的数字化之旅</p>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item active">联系</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 fade-in mb-5">
                    <h2 class="mb-4">发送消息</h2>
                    <!-- 成功/失败提示容器（Bootstrap Toast/Alert 可复用） -->
                    <div id="toastRoot" class="position-fixed top-0 end-0 p-3" style="z-index: 1080"></div>
                    <form class="contact-form" id="contactForm" novalidate>
                        <div class="form-group mb-4">
                            <input type="text" class="form-control" id="name" name="name" placeholder="您的姓名" autocomplete="name" required>
                            <i class="fas fa-user form-icon"></i>
                            <div class="invalid-feedback" id="nameFeedback">请输入您的姓名（至少2个字符）</div>
                        </div>
                        <div class="form-group mb-4">
                            <input type="email" class="form-control" id="email" name="email" placeholder="您的邮箱" autocomplete="email" required>
                            <i class="fas fa-envelope form-icon"></i>
                            <div class="invalid-feedback" id="emailFeedback">请输入有效的邮箱地址</div>
                        </div>
                        <div class="form-group mb-4">
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="联系电话" autocomplete="tel" required>
                            <i class="fas fa-phone form-icon"></i>
                            <div class="invalid-feedback" id="phoneFeedback">请输入有效的手机号或座机号</div>
                        </div>
                        <div class="form-group mb-4">
                            <select class="form-control" id="service" name="service" required>
                                <option value="">请选择服务类型</option>
                                <option value="website">网站建设</option>
                                <option value="software">软件开发</option>
                                <option value="app">APP/小程序开发</option>
                                <option value="design">视觉设计</option>
                                <option value="outsourcing">人才外包</option>
                                <option value="erp">ERP进销存管理系统</option>
                                <option value="crm">CRM客户关系管理系统</option>
                                <option value="mall">商城系统</option>
                                <option value="other">其他咨询</option>
                            </select>
                            <i class="fas fa-list form-icon"></i>
                            <div class="invalid-feedback" id="serviceFeedback">请选择您希望咨询的服务类型</div>
                        </div>
                        <div class="form-group mb-4">
                            <textarea class="form-control" id="message" name="message" rows="6" placeholder="项目需求描述（不少于10个字）" required></textarea>
                            <i class="fas fa-comment-dots form-icon"></i>
                            <div class="invalid-feedback" id="messageFeedback">请简单描述您的需求，便于我们快速响应</div>
                        </div>
                        <button type="submit" class="submit-btn w-100" id="submitBtn">
                            <span class="btn-text">提交咨询</span>
                        </button>
                    </form>
                </div>

                <div class="col-lg-6 fade-in">
                    <h2 class="mb-4">联系方式</h2>
                    <div class="contact-info">
                        <div class="contact-item mb-4">
                            <i class="fas fa-map-marker-alt" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>公司地址</strong>
                                <p class="text-muted mb-0">中国·深圳·南山区科技园南区深圳湾科技生态园</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-phone" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>联系电话</strong>
                                <p class="text-muted mb-0">400-888-8888</p>
                                <p class="text-muted small mb-0">周一至周五 9:00 - 18:00</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-envelope" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>电子邮箱</strong>
                                <p class="text-muted mb-0">contact@feiyit.com</p>
                                <p class="text-muted small mb-0">我们会在24小时内回复您</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-clock" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>工作时间</strong>
                                <p class="text-muted mb-0">周一至周五 9:00 - 18:00</p>
                                <p class="text-muted small mb-0">周末及法定节假日休息</p>
                            </div>
                        </div>

                        <div class="mt-5">
                            <h4 class="mb-3">关注我们</h4>
                            <div class="footer-links">
                                <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
                            </div>
                        </div>

                        <!-- 地图占位 -->
                        <div class="mt-5">
                            <h4 class="mb-3">办公地点</h4>
                            <div class="map-placeholder" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 300px; border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <div class="text-center text-white">
                                    <i class="fas fa-map-marked-alt" style="font-size: 3rem; opacity: 0.8;"></i>
                                    <p class="mt-3 mb-0">地图位置</p>
                                    <p class="small">深圳市南山区科技园</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="bg-light py-5">
        <div class="container">
            <h2 class="section-title">常见问题</h2>
            <p class="section-subtitle">快速了解您可能关心的问题</p>
            <div class="row mt-5">
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>项目开发周期是多久？</h4>
                        <p class="text-muted">根据项目复杂度不同，一般网站项目需要2-4周，软件系统需要1-3个月。我们会在需求沟通后给出详细的项目计划和时间表。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>如何保证项目质量？</h4>
                        <p class="text-muted">我们采用敏捷开发流程，每个阶段都有严格的测试和验收标准。同时提供项目演示、用户测试等环节，确保最终交付满足您的需求。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>售后服务如何？</h4>
                        <p class="text-muted">我们提供1年免费技术支持和维护服务，7×24小时响应机制。超过质保期后，也可选择年度维护服务套餐。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>费用如何计算？</h4>
                        <p class="text-muted">我们根据项目需求、功能复杂度、开发周期等因素综合评估。首次咨询免费，需求确认后会提供详细的报价方案。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="友links-section">
                <h4 class="text-center mb-4" style="color: white; font-weight: 600;">友情链接</h4>
                <div class="row">
                    <div class="col-12">
                        <div class="friendly-links">
                            <a href="https://www.aliyun.com" target="_blank" class="friendly-link">阿里云</a>
                            <a href="https://cloud.tencent.com" target="_blank" class="friendly-link">腾讯云</a>
                            <a href="https://www.huaweicloud.com" target="_blank" class="friendly-link">华为云</a>
                            <a href="https://github.com" target="_blank" class="friendly-link">Github</a>
                            <a href="https://www.bootcdn.cn" target="_blank" class="friendly-link">BootCDN</a>
                            <a href="https://www.npmjs.com" target="_blank" class="friendly-link">NPM</a>
                            <a href="https://developer.mozilla.org" target="_blank" class="friendly-link">MDN</a>
                            <a href="https://stackoverflow.com" target="_blank" class="friendly-link">StackOverflow</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center my-5">
                <div class="footer-links mb-4">
                    <a href="#" class="social-icon" title="微信"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon" title="微博"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon" title="Github"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-icon" title="领英"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
                </div>
                <p class="mb-2" style="font-size: 1rem;">&copy; 2024 飞易腾科技 版权所有</p>
                <p class="text-muted small mb-4">专注于创新的网站建设服务 | 飞速响应 · 易用体验 · 腾飞助力</p>
            </div>

            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <div class="qrcode-section">
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fab fa-weixin" style="font-size: 4rem; color: #07c160;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信公众号</p>
                                </div>
                            </div>
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fas fa-qrcode" style="font-size: 4rem; color: #6366f1;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信小程序</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="beian-info">
                            <p class="mb-2">
                                <i class="fas fa-shield-alt me-2"></i>
                                <a href="https://beian.miit.gov.cn" target="_blank" class="beian-link">粤ICP备2024123456号-1</a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-balance-scale me-2"></i>
                                <a href="http://www.beian.gov.cn" target="_blank" class="beian-link">
                                    <img src="" alt="" class="me-1" style="vertical-align: text-bottom;">
                                    粤公网安备 44030502000000号
                                </a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-copyright me-2"></i>
                                增值电信业务经营许可证：粤B2-20240000
                            </p>
                            <p class="mb-0 small text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                公司地址：广东省深圳市南山区科技园南区深圳湾科技生态园
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-disclaimer">
                <p class="mb-0 small">
                    本网站所有内容及图片均受法律保护，未经许可不得转载、复制或镜像。
                    <span class="mx-2">|</span>
                    网站内容仅供参考，不作为任何法律依据。
                </p>
            </div>
        </div>
    </footer>

    <!-- jQuery + Validate -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

    <script>
        // Navbar Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('navToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        navToggle?.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });

        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.body;

        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');

            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkMode', null);
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });

        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });

        // Tech banner particles
        (function createParticlesFor(id, count = 50) {
            const container = document.getElementById(id);
            if (!container) return;
            for (let i = 0; i < count; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                const size = Math.random() * 4 + 2; // 2-6px
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.animationDelay = (Math.random() * 8) + 's';
                particle.style.animationDuration = (Math.random() * 12 + 12) + 's';
                container.appendChild(particle);
            }
        })('contactParticles', 48);

        // Contact Form（jQuery Validate + 模拟接口）
        (function() {
            // 自定义电话号码验证（中国手机号或区号-座机）
            $.validator.addMethod('cnphone', function(value, element) {
                if (!value) return false;
                const v = value.replace(/\s+/g, '');
                const mobile = /^(?:(?:\+?86)?1[3-9]\d{9})$/; // 11位手机号
                const tel = /^(?:0\d{2,3}-)?\d{7,8}$/;       // 座机 0755-xxxxxxx
                return mobile.test(v) || tel.test(v);
            }, '请输入有效的联系电话');

            const $form = $('#contactForm');
            const $btn = $('#submitBtn');

            function showToast(message, type = 'success') {
                const root = document.getElementById('toastRoot') || document.body;
                const toast = document.createElement('div');
                toast.className = `toast align-items-center text-white bg-${type} border-0`;
                toast.role = 'alert';
                toast.ariaLive = 'assertive';
                toast.ariaAtomic = 'true';
                toast.innerHTML = `
                  <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>`;
                (document.getElementById('toastRoot') || document.body).appendChild(toast);
                const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
                bsToast.show();
                toast.addEventListener('hidden.bs.toast', () => toast.remove());
            }
            // Mock 后端：拦截 /api/contact 的 AJAX 请求并返回 JSON
            (function setupMockAjax(){
                // 使用 'json' 数据类型注册传输层，拦截 /api/contact
                $.ajaxTransport('json', function(options, originalOptions, jqXHR){
                    if (options.url && options.url.indexOf('/api/contact') === 0) {
                        return {
                            send: function(headers, complete){
                                setTimeout(function(){
                                    const ok = Math.random() > 0.05; // 95% 成功
                                    if (ok) {
                                        const ticket = 'FYT-' + Date.now().toString(36).toUpperCase();
                                        try {
                                            const payload = originalOptions.data ? (typeof originalOptions.data === 'string' ? JSON.parse(originalOptions.data) : originalOptions.data) : {};
                                            const storeKey = 'contact_submissions';
                                            const list = JSON.parse(localStorage.getItem(storeKey) || '[]');
                                            list.push({ ticket, ts: new Date().toISOString(), ...payload });
                                            localStorage.setItem(storeKey, JSON.stringify(list));
                                        } catch(e) {}
                                        complete(200, 'success', { json: { ok: true, ticket: ticket } }, 'Content-Type: application/json');
                                    } else {
                                        complete(500, 'error', { json: { ok: false, message: '网络繁忙，请稍后再试' } }, 'Content-Type: application/json');
                                    }
                                }, 1200);
                            },
                            abort: function(){}
                        };
                    }
                });
            })();

            $form.validate({
                ignore: [],
                rules: {
                    name: { required: true, minlength: 2, normalizer: v => $.trim(v) },
                    email: { required: true, email: true, normalizer: v => $.trim(v) },
                    phone: { required: true, cnphone: true, normalizer: v => $.trim(v) },
                    service: { required: true },
                    message: { required: true, minlength: 10, normalizer: v => $.trim(v) }
                },
                messages: {
                    name: { required: '请输入您的姓名', minlength: '至少2个字符' },
                    email: { required: '请输入邮箱', email: '邮箱格式不正确' },
                    phone: { required: '请输入联系电话' },
                    service: { required: '请选择服务类型' },
                    message: { required: '请填写需求', minlength: '不少于10个字符' }
                },
                errorPlacement: function(error, element) {
                    element.addClass('is-invalid');
                    const box = element.closest('.form-group').querySelector('.invalid-feedback');
                    if (box) { box.textContent = error.text(); box.style.display = 'block'; }
                },
                highlight: function(element) {
                    element.classList.add('is-invalid');
                },
                unhighlight: function(element) {
                    element.classList.remove('is-invalid');
                },
                submitHandler: function(form) {
                    const data = {
                        name: $('#name').val().trim(),
                        email: $('#email').val().trim(),
                        phone: $('#phone').val().trim(),
                        service: $('#service').val(),
                        message: $('#message').val().trim(),
                        page: 'contact.html'
                    };
                    $btn.addClass('loading').prop('disabled', true);
                    $.ajax({
                        url: '/api/contact',
                        method: 'POST',
                        contentType: 'application/json; charset=UTF-8',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        timeout: 8000,
                        success: function(res){
                            if (res && res.ok) {
                                showToast(`提交成功！工单号：${res.ticket}`,'success');
                                form.reset();
                                $(form).find('.is-valid, .is-invalid').removeClass('is-valid is-invalid');
                            } else {
                                showToast((res && res.message) || '提交失败，请稍后再试','danger');
                            }
                        },
                        error: function(xhr){
                            const msg = (xhr && xhr.responseJSON && xhr.responseJSON.message) || '网络繁忙，请稍后再试';
                            showToast(msg, 'danger');
                        },
                        complete: function(){
                            $btn.removeClass('loading').prop('disabled', false);
                        }
                    });
                }
            });

            // 显式按钮点击校验与拦截，避免“直接提交”
            $btn.on('click', function(e){
                e.preventDefault();
                if ($btn.prop('disabled')) return;
                const ok = $form.valid();
                if (!ok) {
                    // 友好提示并聚焦第一个错误字段
                    showToast('请完善表单信息后再提交','warning');
                    const $first = $form.find('.is-invalid, :invalid').first();
                    if ($first.length) $first.trigger('focus');
                    return;
                }
                // 交由 validate 的 submitHandler 统一处理 AJAX 提交
                $form.trigger('submit');
            });

            // 交互优化：输入变更即清除错误提示
            $('#contactForm').on('input change', 'input, select, textarea', function() {
                $(this).removeClass('is-invalid');
                const box = this.closest('.form-group')?.querySelector('.invalid-feedback');
                if (box) box.style.display = 'none';
            });
        })();
    </script>
</body>
</html>
